<!--  -->
<template>
  <div class="">
     <crumb  title="首页" title2="商品管理" title3="商品列表"></crumb >
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            clearable
            v-model="queryInfo.query"
            @clear="getData"
          >
            <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="addgoods">添加商品</el-button>
        </el-col>
      </el-row>

      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
           border
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="goods_name" label="名称"> </el-table-column>
          <el-table-column prop="goods_price" label="价格"> </el-table-column>
          <el-table-column prop="goods_weight" label="重量"> </el-table-column>
          <el-table-column prop="add_time" label="时间"> 
            <template slot-scope="scope">
                {{scope.row.add_time | formatDate}}
                </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleUpate(scope.row)"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      uersname: "",
      dialogVisible: false,
      tableData: [],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    
    addgoods(){
     this.$router.push({ path:'/add'}) 

     console.log(1);
    },
    handleSizeChange(size) {
      this.queryInfo.pagenum = 1;
      this.queryInfo.pagesize = size;
      this.getData();
    },
    handleCurrentChange(num) {
      this.queryInfo.pagenum = num;
      this.getData();
    },
    async getData() {
      const { data: res } = await this.myaxios.get("goods", {
        params: this.queryInfo,
      });
      // console.log(res);
      this.tableData = res.data.goods;
      this.total = res.data.total;
      this.$message({
          message: '获取数据成功',
          type: 'success'
        });
    },
    handleUpate(row) {
       this.$router.push({path:'/updat',query:{id:row.goods_id}}) 
    },
   async handleDelete(row) {
     console.log(row)
       const { data: res } = await this.myaxios.delete(`goods/${row.goods_id}`)
       if(res.meta.status!==200){
      
           return this.$message.error('失败');
        }
        this.$message.success('成功')
        this.getData()
    },
  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped></style>
